<!DOCTYPE html>
<html lang="en">
<head>
<!--收费管理-> 1,收费项目-->
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>

    <style>
        table{
            text-align: center;
        }
        td{
            height: 60px;
            line-height: 60px;
        }
    </style>
    <link rel="stylesheet" href="css/anniu.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1  style="font-weight: bolder;text-shadow:5px 5px 5px burlywood ">首页>收费管理>收费项目</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <b style="font-size: larger;font-weight: bolder">小区 ：</b>
            <select style="height: 31px;" id="select1">
                  <option value="0">请选择小区</option>
                </select>
            收费项目名称<input style="height: 33px;" placeholder="请输入名称..." id="xiangmuname"/>
            <a  id="bu3" class="button blue" style="margin-top: -3px"><span class="glyphicon glyphicon-search"></span></a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <a href="#addmyModal1" data-toggle="modal"  class="button blue">添加收费项目</a>
            <span class="button orange" id ="bu2">批量删除</span>
        </div>
    </div>

    <div class="row" style="overflow: scroll;height:800px;">
        <div  class="col-md-12">
            <table style="table-layout: fixed"  class="table table-hover table-striped table-bordered" id="tableone">
               <tr style="position: sticky;top:0;z-index: 999;font-weight: bolder;font-size: larger">
                    <td>
                        <input type="checkbox" id="quanxuan"/>
                    </td>
                    <td>收费项目单序号</td>
                    <td>收费项目名称</td>
                    <td>单价</td>
                    <td>收费周期</td>
                    <td>小区</td>
                    <td>备注</td>
                    <td>操作人</td>
                    <td>操作时间</td>
                    <td>操作</td>
                </tr>
            </table>
        </div>
        <div class="col-md-4 col-md-offset-5" style="position: absolute;top: 450px">
            <ul id="pageul" class="pagination pagination-lg">
            </ul>
        </div>
    </div>
</div>
<!--(1)收费管理→收费项目->添加项目模态框-->
<div class="modal fade" id="addmyModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close " data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">收费项目单维护</h4>
            </div>
            <div class="modal-body">
                <div class="form-group has-feedback">
                  收费项目名称
                    <input id="name" placeholder="请输入项目名称..."/>
                  收费标准名称
                    <input id="name2" placeholder="请输入标准名称..."/> >
                </div>
                <div class="form-group has-feedback">
                    <label>单价</label>
                    <input type="number" id="danjia" class="form-control"  placeholder="请输入单价..."/>
                </div>
                <div class="form-group has-feedback">
                    <label>收费周期</label>
                    <select  id="zouqi" class="form-control">
                        <option>年</option>
                        <option>季</option>
                        <option>月</option>
                        <option>日</option>
                    </select>
                </div>
                <div class="form-group has-feedback">
                    <label>小区</label>
                    <select id="select2">
                        <option value="0">请选择小区</option>
                    </select>
                </div>
                <div class="form-group has-feedback">
                    <label>备注</label>
                    <input id="bz" class="form-control"  placeholder="请输入备注..."/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="tijiao" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    let newPage;
    let PageSum;
    function shang(){
        if(newPage-1>=1){
            getPagemingxi(newPage-1)
        }
    };
    function xia(){
        if(newPage+1<=PageSum){
            getPagemingxi(newPage+1)
        }
    };

    /**
     * 添加项目
     */
    $("#tijiao").on("click",function(){
        if($("#name").val()==""){
            Dialogs("主收费类型未填写","red")
            return;
        }
        if($("#name2").val()==""){
            Dialogs("标准收费类型未填写","red")
            return;
        }
        if($("#danjia").val()==""){
            Dialogs("单价未填写","red")
            return;
        }
        if($("#select2").val()=="0"){
            Dialogs("收费小区未选择","red")
            return;
        }
        $.ajax({
            url:"addmages",
            type:"get",
            dataType:"json",
            data:{
                "name":$("#name").val(),
                "name2":$("#name2").val(),
                "danjia":$("#danjia").val(),
                "zouqi": $("#zouqi").val(),
                "xq": $("#select2").val(),
                "bz": $("#bz").val()
            },
            success:function(data){
                if(data){
                    succ("添加成功")
                }else {
                    Dialogs("添加失败,小区已存在该主项目收费类型","red")
                }
            }
        });
    });

    /**已完成
     * 加入数据和组件
     * @param obj
     */
    function add(obj){
        let tr =  document.createElement("tr");
        let td1 =  document.createElement("td");
        let chocbox = document.createElement("input");
        chocbox.type="checkbox"
        chocbox.name="chox"
        chocbox.value=obj.S_id
        $(td1).append(chocbox)
        let td2 =  document.createElement("td");
        td2.innerText=obj.S_id
        let td3 =  document.createElement("td");
        td3.innerText=obj.S_Name
        let td4 =  document.createElement("td");
        td4.innerText=obj.S_money
        let td5 =  document.createElement("td");
        td5.innerText=obj.S_date
        let td6 =  document.createElement("td");
        td6.innerText=obj.vname
        let td7 =  document.createElement("td");
        td7.innerText=obj.S_bz
        let td8 =  document.createElement("td");
        td8.innerText=obj.ename
        let td9 =  document.createElement("td");
        td9.innerText=obj.S_czdate.year+"-"+obj.S_czdate.monthValue+"-"+obj.S_czdate.dayOfMonth
        let td10 =  document.createElement("td");
        // let b1= document.createElement("button");
        // $(b1).attr("class","glyphicon glyphicon-pencil btn btn-primary")
        // b1.onclick=function(){
        //      $("#updateModa").modal("show")
        //      $("#h4id").val(td2.innerText);
        // };
        let b2= document.createElement("button");
        $(b2).attr("class","glyphicon glyphicon-trash btn btn-danger")
        b2.onclick=function(){
            delect(td2.innerText);
        };
        td10.append(b2)
        $(tr).append(td1,td2,td3,td4,td5,td6,td7,td8,td9,td10)
        $("#tableone").append(tr)
    }

    /**已完成
     * 查询按钮操作
     */
    $("#bu3").on("click",function(){
        $("#tableone tr:not(:first)").remove()
        $("#pageul").html("")
        let xqid= $("#select1").val()
        let name = $("#xiangmuname").val()
        tianjiashuju(1,xqid,name)
    });
    function tianjiashuju(newpage,xqid,name){
        $.ajax({
            url:"selectmags",
            type:"get",
            dataType:"json",
            data:{
                "id":newpage,
                "xqid":xqid,
                "name":name
            },
            success:function(data){
                for(let dd of data.lm){
                    add(dd)
                }
                PageSum=data.pageSum
                $("#pageul").html("")
                $("#pageul").append("<li><a href=\"#\" onclick=\"shang()\">&laquo;</a></li>")
                let pageSum = data.pageSum
                for(let i =1;i<=pageSum;i++){
                    let li =   document.createElement("li")
                    let a= document.createElement("a")
                    a.innerText=i;
                    if(i==newpage){
                        $(li).attr("class","active")
                    }
                    a.href="#"
                    $(a).on("click",function(){
                        getPagemingxi(a.innerText)
                    });
                    $(li).append(a)
                    $("#pageul").append(li)
                }
                $("#pageul").append("<li><a href=\"#\" onClick=\"xia()\">&raquo;</a></li>")
            }
        });
    }

    /**已完成
     * 批量删除
     */
    $("#bu2").on("click",function(){
        let chs = $("input[name=chox]:checked")
        if(chs.length==0){
            Dialogs("请先选择删除项","red")
            return
        }
        let arr = new Array(chs.length)
        for(let i =0;i<chs.length;i++){
            let te = chs[i].value;
           arr[i]=te
        }
        delects(arr)
    });


    /**已完成
     * 删除操作  单个
     */
    function delect(arr){
            $.ajax({
                url:"delectjilu",
                type:"post",
                data:{"sid":arr},
                dataType:"json",
                success:function(data){
                    if(data){
                        succ("删除成功")
                    }else {
                        Dialogs("删除失败,存在未缴费账单不能删除","red")
                    }
                }
            });
    };

    /**已完成
     * 删除操作  多个
     */
    function delects(arr){
        $.ajax({
            url:"delectjilus",
            type:"post",
            data:{"sids":arr},
            dataType:"json",
            success:function(data){
                if(data==3){
                    succ("删除成功")
                }else if(data==1) {
                    succ("删除部分成功,未缴费账单的缴费类型未删除")
                }else {
                    Dialogs("删除失败,存在未缴费的账单","red")
                }
            }
        });
    };






    /**已完成
     * 全选全部确定或取消
     */
    $("#quanxuan").on("click",function(){
        let coks = document.getElementsByName("chox");
        if(this.checked){
            for(let i  = 0;i<coks.length;i++){
                coks[i].checked=true;
            }
        }else{
            for(let i  = 0;i<coks.length;i++){
                coks[i].checked=false;
            }
        }
    })

    /**已完成
     * 获取小区列表
     */
    $.ajax({
        url:"getListxiaoqu",
        type:"get",
        dataType:"json",
        success:function(data){
            for(let item of data){
               let op = document.createElement("option")
                op.innerHTML=item.vname;
                op.value=item.vid
               $("#select1").append(op)
                let op1 = document.createElement("option")
                op1.innerHTML=item.vname;
                op1.value=item.vid
                $("#select2").append(op1)
            }
        }
    });

    /**已完成
     * 获取收费项目明细数据
     */
    function getPagemingxi(newpage){
        newPage = newpage;
        $("#tableone tr:not(:first)").remove()
        $.ajax({
            url:"getListshoufeixiangmu",
            type:"get",
            dataType:"json",
            data:{"newPage":newpage},
            success:function(data){
                for(let obj of data.lm){
                    add(obj)
                }
                PageSum=data.pageSum
                $("#pageul").html("")
                $("#pageul").append("<li><a href=\"#\" onclick=\"shang()\">&laquo;</a></li>")
                let pageSum = data.pageSum
                for(let i =1;i<=pageSum;i++){
                    let li =   document.createElement("li")
                    let a= document.createElement("a")
                    a.innerText=i;
                    if(i==newpage){
                        $(li).attr("class","active")
                    }
                    a.href="#"
                    $(a).on("click",function(){
                        getPagemingxi(a.innerText)
                    });
                    $(li).append(a)
                    $("#pageul").append(li)
                }
                $("#pageul").append("<li><a href=\"#\" onClick=\"xia()\">&raquo;</a></li>")
            }
        });

    }
    getPagemingxi(1)

    function Dialogs(text,color){
        layer.open({
            content: '执行结果:'+text.fontcolor(color)
            ,offset:'100px'
            ,time:'3000'
            ,success:function(layero, index) {
                var timeNum = this.time/1000, setText = function(start){
                    layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
                };
                setText(!0);
                this.timer = setInterval(setText, 1000);
                if(timeNum <= 0) clearInterval(this.timer);
            }
        });
    }
    function succ(mags){
        layer.confirm('执行结果： '+mags.fontcolor("green"), {
                offset: '100px'
                , btn: ['确定'] //按钮
            }, function(){
                window.location.reload()
            }
        );
    }
</script>
</html>